<!--IE9一下兼容问题 暂不使用-->
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px;width: 980px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
    // 路径配置
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });

    // 使用
    require(
            [
                'echarts',
//                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
                'echarts/chart/line'
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));

                var option = {
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['1111','2222','3333','4444','5555']
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: false},
                            dataView : {show: false, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore : {show: false},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'1111',
                            type:'line',
                            smooth:true,
                            data:[560, 650, 672, 60, 1914, 273, 60, 1241, 1320, 728, 230, 760, 2080, 714, 2054, 243, 68, 1080, 1720, 36, 196, 418, 408, 416, 429, 2296, 44, 1350, 1242, 712, 540]
                        },
                        {
                            name:'2222',
                            type:'line',
                            smooth:true,
                            data:[90, 1102, 280, 949, 36, 1242, 1176, 82, 120, 390, 61, 3, 477, 264, 760, 124, 924, 1620, 0, 48, 1344, 1040, 936, 960, 490, 168, 943, 0, 1768, 63, 736]
                        },
                        {
                            name:'3333',
                            type:'line',
                            smooth:true,
                            data:[105, 574, 210, 988, 420, 594, 1872, 1826, 344, 1496, 760, 924, 1674, 704, 1711, 920, 2112, 0, 4, 144, 600, 225, 138, 1400, 2112, 1752, 2418, 765, 18, 2112, 252]
                        },
                        {
                            name:'4444',
                            type:'line',
                            smooth:true,
                            data:[1400, 210, 1450, 232, 2146, 324, 0, 2156, 345, 54, 780, 1316, 1892, 88, 435, 150, 96, 357, 8, 60, 252, 1843, 486, 2136, 168, 0, 36, 1050, 700, 312, 420]
                        },
                        {
                            name:'5555',
                            type:'line',
                            smooth:true,
                            data:[304, 760, 2325, 456, 855, 368, 170, 986, 492, 323, 2000, 196, 60, 728, 378, 480, 0, 1340, 63, 0, 253, 248, 2300, 660, 270, 168, 332, 1820, 1350, 800, 315]
                        }
                    ]
                };


                // 为echarts对象加载数据
                myChart.setOption(option);
            }
    );
</script>
</body>